<template>
    <div class="chatPage">
        <div class="myChat" :id="$props.id" ref="echartBox">
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import { onMounted, ref, watch, watchEffect } from 'vue'
export default {
    name: "zlcChat",
    props:{
        id: {
          type:String,
          default(){
              return ''
          }
        },
        option:{
            type: Object,
            default(){
                return {}
            }
        }
    },
    setup(props,  content ){
        let myChat = null
        let index = ref(0) //选中了第几个
      let initChat = (newValue) => {
          myChat = echarts.init(document.getElementById(`${props.id}`))
          // 4.传入数据
          myChat.setOption(newValue);
      }

      // watch(() => props.option, (newValue, oldValue) => {
      //     initChat(newValue)
      //     console.log("监听了", newValue)
      // }, { deep:true})

        watchEffect(() => {
            // if(!props.option || !props.id) return
            // myChat = echarts.init(document.getElementById(`${props.id}`))
            // // 4.传入数据
            // myChat.setOption(props.option);
            if(props.option){
                // myChat = echarts.init(document.getElementById(`${props.id}`))
                // myChat.setOption(props.option);
                initChat(props.option)
            }

        }, { flush: 'post' })

        onMounted(() => {
          window.addEventListener('resize', () => {
              myChat.resize()

              let options = props.option
              myChat.setOption(options);
          });
      })

      return {
          initChat,
          myChat
      }
    }
}
</script>

<style scoped lang="less">
.chatPage{
  width: 100%;
  height: 100%;
  .myChat{
    width: 100%;
    height: 100%;
      div{
          width: 100%;
          height: 100%;
      }
  }
}

</style>
